<script lang="ts" setup>
import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue'
import { useRouter } from 'vue-router'
//
const router = useRouter()
const textareaRef = ref();
const textvalue = ref('');
const textrea =ref()

onMounted(() => {
    // textrea.value.focus();
    const savedText = sessionStorage.getItem('SummaryTextvalue')
    if (savedText) {
        textvalue.value = savedText
    }else{
        textrea.value='';
    }
});
//
function onClickdefault() {
    textvalue.value = '一个春暖花开的日子，我和同学们兴高采烈地去春游啦！经过一个多小时的车程，我们终于到达了目的地——辰山植物园。进园后，首先映入眼帘的是一片樱花林。一阵微风吹过，樱花的花瓣如同一只只白蝴蝶在空中翩翩起舞，随风飘来，又随风飘去，真是好看极了！同学们纷纷在樱花树下照相，留下这美好的一刻。离开了樱花林，穿过春景园，我们来到了儿童乐园。同学们有的直奔彩色小山的山顶，有的冲向小桥……我则在走木桩，一开始，木桩很低，我轻而易举地走完了。可是后来木桩越来越高了，我鼓足勇气，一步一步，稳稳地踩在了木桩上，终于，我成功地走完了所有木桩！在一旁的老师和同学们都为我喝彩。下一个景点是矿坑公园。还没走进公园，远远地就听见瀑布“哗哗”的流水声，这让我想起了“飞流直下三千尺，疑是银河落九天”这句诗。循着水声，我看到了一个大大的矿坑，水流从山顶一泻而下，激起了一阵阵水花，那景色真是壮观！走过竹林，我们又来到了温室，令我印象深刻的植物是“见血封喉”。当我走过“见血封喉”时，浑身都起了鸡皮疙瘩，因为在《美丽的西双版纳》这篇课文里，我知道“见血封喉”这种树的叶子是有毒的，今天目睹了它的庐山真面目，真让人心惊胆战！最后，我们在草坪上野餐，玩游戏，大家玩得不亦乐乎！这次辰山植物园之行让我们每一个小朋友都走进了大自然，感受到春的气息，我多么希望能留住春姑娘的脚步啊！'
}
function clearInput() {
    textvalue.value = '';
}
function onClicksummary() {
    if (!textvalue.value.trim()) {
        ElMessage.error('请输入内容');
        return;
    };
    sessionStorage.setItem('SummaryTextvalue', textvalue.value)
    router.push({ path: '/intention', query: { text: textvalue.value } })
}
const overColor = () => {
    document.querySelector('.clear-button').classList.add('a');
};
const outColor = () => {
    document.querySelector('.clear-button').classList.remove('a');
};
const handleFocus = () => {
    document.querySelector('.textera-save-style').classList.add('change-color');
};

const handleBlur = () => {
    document.querySelector('.textera-save-style').classList.remove('change-color');
};
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        textvalue.value = '';
        // if(textrea.value){
        //     textrea.value.focus();
        // }
    },
    { immediate: true }
)
</script>

<template>
  <!-- <keep-alive> -->
    <section class="h-full flex flex-col">
        <MobileNav :navname="'内容总结'" />
        <div class="w-full h-full flex flex-col p-3">
            <div class="text-box pb-4 relative">
                <!-- <el-icon class="btn-clear" @click="clearInput" @mouseover="overColor" @mouseout="outColor">
                    <Close />
                </el-icon> -->
                <!-- <textarea ref="textareaRef"  placeholder="请输入内容"  v-model="textvalue" class="w-full h-full text-cneter"></textarea> -->
                <div class="textera-save-style w-full h-full rounded">
                    <el-input type="textarea" v-model="textvalue" :rows="10" placeholder="请输入需要总结的文本"
                        class="text-input no-border h-full" @focus="handleFocus" @blur="handleBlur" ref="textrea" />
                    <el-icon class="clear-button" @click="clearInput" @mouseover="overColor" @mouseout="outColor">
                        <Close />
                    </el-icon>
                </div>
            </div>
            <div>
                <div class="flex">
                    <el-button size="large" @click="onClickdefault">使用默认值</el-button>
                    <el-button type="success" size="large" class="btn-sum" @click="onClicksummary">开始总结</el-button>
                </div>
            </div>
        </div>
    </section>
<!-- </keep-alive> -->
</template>

<style scoped>
.text-box {
    flex: 1;
}

.btn-clear {
    /* color: #409eff; */
    position: absolute;
    top: -2px;
    right: -2px;
    cursor: pointer;
    font-size: 18px;

}

.btn-clear.a {
    color: #409eff;
}

.text-cneter {
    outline: none;
    border: none;
    resize: none;
    font-size: 15px;
    line-height: 25px;
    /* border-color: #545459; */
    display: block;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-style: normal;
    scrollbar-width: none;
    outline-color: #545459;
    color: #1A2029;
}

.btn-sum {
    width: 100%;
}
.textera-save-style.change-color {
    border-color: #409eff;
}
::v-deep(.el-textarea__inner){
    height: 100% !important;
    box-shadow:none;
};
</style>